<!--
 * @Author: wei_sc2@ecidi.com
 * @Date: 2020-12-30 10:15:16
 * @LastEditors: wei_jt@ecidi.com
 * @LastEditTime: 2021-07-30 11:45:41
 * @Description: 重定向路由选择
 -->
<template>
  <div ref="reference">
    <fks-autocomplete
      v-model="text"
      class="inline-input"
      style="width: 100%;"
      :fetch-suggestions="querySearch"
      :placeholder="LANG.COMPONENT_HOLDER"
      clearable
      @select="handleSelect"
    />
  </div>
</template>

<script>
import requireContext from './context'
export default {
  name: 'PathSelect',
  props: {
    component: {
      type: String,
    },
    id: {
      type: String,
    },
    readonly: Boolean,
  },
  data() {
    return {
      path: [],
    }
  },
  computed: {
    text: {
      get: function () {
        return this.component
      },
      set: function (val) {
        this.$emit('update:component', val)
      },
    },
  },
  mounted() {
    this.text = this.component
    this.initPath(this.routes)
  },
  methods: {
    /**
     * @description:遍历路径，处理菜单component
     * @param {Array} 组件路径
     * @param {String} path
     * @return: Array
     */
    initPath() {
      requireContext.forEach((item) => {
        let node = { value: item }
        this.path.push(node)
      })
    },
    /**
     * @description:输入提示函数
     * @param {Array} 组件路径
     * @param {String}
     * @return: Array
     */
    querySearch(queryString, cb) {
      let path = this.path
      let results = queryString
        ? path.filter(this.createFilter(queryString))
        : path
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    /**
     * @description:筛选数据函数
     * @param {Array}
     * @param {String}
     * @return: Array
     */
    createFilter(queryString) {
      return (path) => {
        return path.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    /**
     * @description:点击事件函数
     * @param {Array} 组件路径
     * @param {String}
     * @return: Array
     */
    handleSelect(val) {
      //toDo
    },
  },
}
</script>

<style scoped>
</style>
